<template>
	<div>
		<el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm.data" 
			label-width="auto" class="demo-ruleForm" :size="formSize" status-icon>
			<el-form-item label="任务名称" prop="TaskName">
				<el-input v-model="ruleForm.data.TaskName" />
			</el-form-item>			
						
			<el-form-item label="负责人" prop="UserId">
				<el-select v-model="ruleForm.data.UserId" style="width: 200px;" filterable placeholder="请选择负责人">
					<el-option v-for="item in User" :value="item.Id" :label="item.UserName"></el-option>
				</el-select>
			</el-form-item>
								
			<el-form-item label="项目名称" prop="ProjectId">
				<el-select v-model="ruleForm.data.ProjectId" style="width: 200px;" filterable placeholder="请选择负责人">
					<el-option v-for="item in Project" :value="item.Id" :label="item.ProjectName"></el-option>
				</el-select>
			</el-form-item>
			
			<el-form-item label="描述" prop="Precautions">
				<el-input v-model="ruleForm.data.Precautions" />
			</el-form-item>
			<el-form-item label="是否接受" prop="IsAccept">
				<el-input v-model="ruleForm.data.IsAccept" />
			</el-form-item>
			<el-form-item label="状态" prop="Status">
				<el-select-v2 v-model="ruleForm.data.Status" placeholder="请选择状态" :options="optionsStatus" />
			</el-form-item>

			<el-form-item>
				<el-button type="primary" @click="submitForm(ruleFormRef)">
					保存
				</el-button>
				<el-button @click="resetForm(ruleFormRef)">重置</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script lang="ts" setup>
	import { reactive, ref, onMounted } from 'vue'
	import  { ComponentSize, FormInstance, FormRules,ElNotification ,ElForm,ElFormItem } from 'element-plus'
	
	import taskapi from "@/api/taskapi"
	import { number } from 'echarts/core';
	import userapi from "@/api/userapi"
	import projectapi from "@/api/projectapi"

	//负责人
	const User = ref([])
	//项目
	const Project=ref([])
	
	//查询负责人
	const getmanger = () => {
		userapi.select({ DeptId: 9 }).then(res => {
			User.value = res.data;
		}).catch(err => {
			console.log(err)
		})
	}
	//查询项目
	const getbuiness = () => {
		projectapi.select().then(res => {
			Project.value = res.data;
		}).catch(err => {
			console.log(err)
		})
	}
	
	const props = defineProps({
		Id: Number,
	});
	const emit = defineEmits(['onSave'])

	interface RuleForm {
		TaskName : string
		UserId:number
		ProjectId:number
		Precautions : string	
		Status:number
	}

	const formSize = ref<ComponentSize>('default')
	const ruleFormRef = ref<FormInstance>()
	const ruleForm = reactive<RuleForm>({
		data: {
			TaskName: '',
			UserId:0,
			ProjectId:0,
			Precautions:'',
			Status:1,
		}
	})


	const optionsStatus = [
		{
			value: 1,
			label: "正常",
		},
		{
			value: 0,
			label: "删除",
		},
		{
			value: -1,
			label: "禁用",
		}
	]

	const getData = () => {
		taskapi.get({ id: props.Id }).then(res => {
			console.log("aaa=", res.data);
			ruleForm.data = res.data
		})
	}
	onMounted(() => {
		getData();
		getmanger();
		getbuiness();
	})
	const submitForm = async (formEl : FormInstance | undefined) => {		
		if (!formEl) return
		await formEl.validate(valid => {
			
			if (valid) {
				console.log("ruleForm.data", ruleForm.data)

				taskapi.put(ruleForm.data).then(res => {
					if (res.code == 1) {
						ElNotification({
							title: 'Success',
							message: '修改成功',
							type: 'success',
							duration: 800,
							onClose: () => {
								emit("onSave", true)
							}
						})
					} else {
						ElNotification({
							title: 'Error',
							message: '失败',
							type: 'Error',
							duration: 800,
						})
					}
				}).catch(err => {
					ElNotification({
						title: 'Error',
						message: '失败',
						type: 'Error',
						duration: 800,
					})
				})
			} else {
				console.log('error submit!', fields)
			}
		})
	}

	const resetForm = (formEl : FormInstance | undefined) => {
		if (!formEl) return
		formEl.resetFields()
	}
</script>